<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('用户管理','/assets/module/formSelects/formSelects-v4.css')"></head>
<body>
<!-- user表单弹窗 -->
<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label required">账号</label>
        <div class="layui-input-block">
            <input name="userName" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名</label>
        <div class="layui-input-block">
            <input name="nickName" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                   lay-verType="tips"  lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="phone" placeholder="请输入手机号" type="text" class="layui-input"
                   />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Email</label>
        <div class="layui-input-block">
            <input name="email" placeholder="请输入邮箱" type="text" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked/>
            <input type="radio" name="sex" value="女" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">VIP类型</label>
        <div class="layui-input-block">
            <select name="userGrade" lay-verify="required">
                <option value="0">普通用户</option>
                <option value="1">终身VIP</option>
                <option value="2">至尊VIP</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleId" xm-select="roleId">
            <option th:each="role:${roles}" th:value="${role.id}" th:text="${role.roleName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['layer', 'admin', 'form', 'formSelects'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var formSelects = layui.formSelects;

        form.render('radio');

        var url = '/admin/user/'; //POST请求
        // 回显user数据
        var user = admin.getTempData('t_user');
        if (user) {
            $('input[name="userName"]').attr('readonly', 'readonly');
            form.val('user-form', user);
            var rds = new Array();
            for (var i = 0; i < user.roles.length; i++) {
                rds.push(user.roles[i].id);
            }
            formSelects.value('roleId', rds);
        }
		
        // 表单提交事件
        form.on('submit(user-form-submit)', function (data) {
            B.post({
            	url:url,
            	loading:true,
            	data:data.field,
            	success:function(res){
            		if(res.success){
            			top.layer.msg(res.msg,{icon:1});
                        admin.putTempData('formOk', true);
                        //关闭当前
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
            		}else{
            			top.layer.msg(res.msg,{icon:2});
            		}
            	}
            });
            
            return false;
        });
    });
</script>

</body>